<template>
	<view class="content">
		<!-- <view class="index-top">
			<u-swiper :list="imagesList" indicatorInactiveColor="#d4d7da" indicatorActiveColor="#0069da" interval="5000" height="200"
			 indicatorStyle="bottom: 40rpx" circular indicator indicatorMode="dot"></u-swiper>
			<view class="index-top-bottom">
				<view class="serach-dh">
					<u-icon :label="'搜索写字楼、商铺'" labelSize="27rpx" labelColor="#a4a7a8" size="30" name="search" color="#989da3"></u-icon>
				</view>
			</view>
		</view>
		<view class="index-center">

			<view class="center">
				<view class="center-content">
					<view class="center-part">
						<u--image :showLoading="true" :src="imgUrl(`/images/jump/property_insuarance.png`)" width="70px" height="70px"
						 @click="click"></u--image>
						<text class="center-part-title">写字楼</text>
					</view>
					<view class="center-part">
						<u--image :showLoading="true" :src="imgUrl(`/images/jump/house_garden.png`)" width="70px" height="70px" @click="click"></u--image>
						<text class="center-part-title">商铺</text>

					</view>
					<view class="center-part">
						<u--image :showLoading="true" :src="imgUrl(`/images/jump/property_inspection.png`)" width="70px" height="70px"
						 @click="click"></u--image>
						<text class="center-part-title">VR房源</text>

					</view>
					<view class="center-part">
						<u--image :showLoading="true" :src="imgUrl(`/images/jump/realtor.png`)" width="70px" height="70px" @click="click"></u--image>
						<text class="center-part-title">房产专家</text>
					</view>
				</view>

				<view class="center-content" style="margin-top: 40rpx;">
					<view class="center-part">
						<u--image :showLoading="true" :src="imgUrl(`/images/jump/marketing.png`)" width="70px" height="70px" @click="click"></u--image>
						<text class="center-part-title">兼职</text>
					</view>
					<view class="center-part">
						<u--image :showLoading="true" :src="imgUrl(`/images/jump/rental_contract.png`)" width="70px" height="70px"
						 @click="click"></u--image>
						<text class="center-part-title">注册公司</text>
					</view>
					<view class="center-part">
						<u--image :showLoading="true" :src="imgUrl(`/images/jump/house_construction.png`)" width="70px" height="70px"
						 @click="click"></u--image>
						<text class="center-part-title">装修设计</text>
					</view>
					<view class="center-part">
						<u--image :showLoading="true" :src="imgUrl(`/images/jump/residence.png`)" width="70px" height="70px" @click="click"></u--image>
						<text class="center-part-title">推荐好礼</text>

					</view>
				</view>



			</view>
		</view>


		<view class="company-introduce">
			<view class="company-introduce-part">
				<u--image :showLoading="true" :src="imgUrl(`/images/company/company.jpg`)" radius="100%" width="85rpx" mode="widthFix"
				 style="margin-left: 30rpx;"></u--image>

				<view class="company-introduce-title">
					<text class="company-introduce-title-text">找商办找商办找商办找商办找商办找商办</text>
					<view class="company-introduce-location">
						<u-icon name="map-fill" color="#1d7fff" size="17" class="op"></u-icon><text>找商办找商办找商办找商办找商办找商办找商办</text>
					</view>
				</view>

				<u--image :showLoading="true" :src="imgUrl(`/images/company/send.png`)" radius="100%" width="70rpx" height="70rpx"
				 class="op right-png"></u--image>
				<u--image :showLoading="true" :src="imgUrl(`/images/company/wechat-fill.png`)" radius="100%" width="70rpx"
				 height="70rpx" class="op right-png"></u--image>
				<u--image :showLoading="true" :src="imgUrl(`/images/company/phone.png`)" radius="100%" width="70rpx" height="70rpx"
				 class="op right-png"></u--image>

			</view>
			<view class=" company-introduce-part-font">
				<view class="content">
					<u-read-more ref="uReadMore" :toggle="true" closeText="查看更多" :showHeight="100">
							<u-parse  :content="content" @load="load" ></u-parse>
						</u-read-more>
					
				</view>

			</view>
		</view>
		
		
		<view class="information">
			<span class="information-title">房产资讯</span>
			<u-notice-bar direction="column" :text="newsList" :bgColor="'white'" :color="'black'" :icon="''" :fontSize="'30rpx'"></u-notice-bar>
			
		</view>
		
		<view class="recommended">
			<view class="recommended-title">写字楼推荐</view>
			<u-loading-icon color="#0078f8" v-show="buildingsLoading"></u-loading-icon>
			<view class="recommended-content">
				
				<view  v-for="(item,index) in sourceData" :key="index" >
			    <ListPart  class="recommended-part" :sourceData="item"></ListPart> 
				
				<u-line v-show="index != sourceData.length-1"></u-line>
				
			   </view>
			</view>
			
			
			<view class="recommended-bottom" v-show="!buildingsLoading">
				 <u-button type="primary"  text="查看更多" style="width: 90%;margin-top: 20rpx;" icon="search"></u-button>
			</view>
			
			
		</view>
		
		<view class="recommended" style="margin-bottom: 25rpx;">
			<view class="recommended-title">店铺推荐</view>
			<u-loading-icon color="#0078f8" v-show="buildingsLoading"></u-loading-icon>
			<view class="recommended-content">
				
				<view  v-for="(item,index) in sourceData" :key="index" >
			    <ListPart  class="recommended-part" :sourceData="item"></ListPart> 
				
				<u-line v-show="index != sourceData.length-1"></u-line>
				
			   </view>
			</view>
			
			
			<view class="recommended-bottom" v-show="!buildingsLoading">
				 <u-button type="primary"  text="查看更多" style="width: 90%;margin-top: 20rpx;" icon="search"></u-button>
			</view>
			
			
		</view> -->
		
		
		
		
	</view>
</template>

<script>
	// import ListPart from "@/components/list/ListPart.vue"
	export default {
		components:{
			// ListPart:ListPart
		},
		data() {
			return {
				imagesList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				
				sourceData:[],
				content:`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				`,
				newsList: [
									'寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
									'平明送客楚山孤平明送客楚山孤平明送客楚山孤平明送客楚山孤平明送客楚山孤平明送客楚山孤',
									'洛阳亲友如相问',
									'一片冰心在玉壶'
								],
								buildingsLoading:false
			}
		},
		onLoad() {
			// console.log(uni.$u.config.v);
			// console.log(this.$store)
		},
		created() {
			// console.log(this.$store)
			this.buildingsLoading = true
			setTimeout(()=>{
			    this.sourceData =  [{
					images:   this.imgUrl(`/images/company/louImges.jpg`),
					title: `工贸新天地2期-新都会工贸新天地2期-新都会`,
					price: `0.50`,
					surface_start: 100,
					surface_end: 200,
					tagList:'预约折扣22,急售,预约折扣222,预约折扣,预约折扣,急售,预约折扣,急售'
				},{
					images: this.imgUrl(`/images/company/louImges.jpg`),
					title: `工贸新天地2期-新都会工贸新天地2期-新都会`,
					price: `0.50`,
					surface_start: 100,
					surface_end: 200,
					tagList:'预约折扣,急售,预约折扣'
				},{
					images: this.imgUrl(`/images/company/louImges.jpg`),
					title: `工贸新天地2期-新都会工贸新天地2期-新都会`,
					price: `0.50`,
					surface_start: 100,
					surface_end: 200,
					tagList:'预约折扣'
				}]
				this.buildingsLoading  = false
			  },1000);
		},
		methods: {
			 load() {
			                this.$refs.uReadMore.init();
			            }
		}
	}
</script>

<style scoped lang="less">
	.index-top {
		position: relative;

		.index-top-bottom {
			height: 80rpx;
			position: absolute;
			bottom: -50rpx;
			display: flex;
			justify-content: center;
			width: 100%;

			.serach-dh {
				width: 80%;
				background: white;
				height: 100%;
				border-radius: 100rpx;
				box-shadow: 5rpx 5rpx 6rpx #d1d1d1;
				display: flex;
				padding-left: 15rpx;
				align-items: center;
			}
		}
	}

	.index-center {
		width: 100%;
		background: white;
		padding-bottom: 30rpx;
		padding-top: 60rpx;

		.center {
			margin-top: 50rpx;

			.center-content {
				width: 100%;
				display: flex;


				.center-part {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 200rpx;
					flex: 1;

					.center-part-title {
						margin-top: 20rpx;
						font-size: 28rpx;
					}
				}

			}
		}
	}

	.company-introduce {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		width: 100%;
		background: white;
		display: flex;
		flex-direction: column;

		.company-introduce-part {
			width: 100%;
			// border: 1rpx solid red;
			align-items: center;
			height: 150rpx;
			display: flex;

			.company-introduce-title {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-left: 15rpx;
				// margin-right: 20rpx;
				// border: 1rpx solid red;

				.company-introduce-title-text {
					font-size: 35rpx;
				}

				.company-introduce-location {
					font-size: 29rpx;
					color: #afafaf;
					display: flex;
					align-items: baseline;
				}

				text {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					line-height: 25px;
					max-height: 25px;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}



		}

		.company-introduce-part-font {

			font-size: 30rpx;
			// color: #39393a;
             .content{
				 margin-left: 20rpx;
				 margin-right: 20rpx;
				 line-height: 50rpx;
				 
				 // height: 100rpx;
			 }
			

		}
	}
    
	.information{
		margin-top: 20rpx;
		// width: 100%;
		// height: 100rpx;
		padding: 25rpx;
		background: white;
		display: flex;
		align-items: center;
		.information-title{
			font-size: 28;
			font-weight: bold;
			color: #0078f8;
		}
		
	}
	
	.op {
		opacity: 0.7;
	}

	.right-png {
		margin-left: 15rpx;
	}

	.right-png:last-child {
		margin-right: 20rpx;
	}
	.recommended{
		background: white;
		width: 100%;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		// padding:25rpx;
		.recommended-title{
			  font-size: 33rpx;
			  padding: 35rpx 0 10rpx 0;
			  margin-left: 25rpx;
			  // padding-top: 35rpx;
			  // border: 1rpx solid red;
		}
		.recommended-content{
			width: 100%;
			
			// border: 1rpx solid red;
			// height: 200rpx;
			// padding-right: 35rpx;
			display: flex;
			flex-direction: column;
			// padding-left: 10rpx;
			
			.recommended-part{
				// margin: 25rpx 25rpx 25rpx 25rpx;
				// margin-left: 15rpx;
				// padding: 10rpx 0 10rpx 0;
				
			}
		}
		
		.recommended-bottom{
			width: 100%;
			// border: 1rpx solid red;
			display: flex;
			justify-content: center;
		}
	}
	
</style>
